import React, { useState, useEffect } from 'react'

// 自定义hook要以use开头并且驼峰命名
const useClock = () => {
    const [clock, setClock] = useState(new Date())
    useEffect(() => {
        const timer = setInterval(() => setClock(new Date()), 1000)
        return () => clearInterval(timer)
    }, [])
    return clock
}

export default () => {
    const [count, setCount] = useState(0)

    useEffect(() => {
        console.log('~~effct count')
        document.title = count
    }, [count])

    return (
        <div>
            <h3>自定义hook和hook使用规则</h3>
            <div>计数：{count}</div>
            <button onClick={() => setCount(count + 1)}>add</button>
            <div>时钟：{useClock().toLocaleTimeString()}</div>
            <h4>hooks使用规则</h4>
            <ol>
                <li>1，只能在函数内部的最外层使用，而不能在判断、循环或子函数内调用；</li>
                <li>2，只能在React函数组件或自定义hook中使用，而不能在普通js函数中使用</li>
            </ol>
        </div>
    )
}

